<template>
	<div class="bg-light">
		<div class="user_header d-flex align-items-center px-3">
			<van-icon name="user-o" size="75" color="gray" class="mr-3"/>
			<div>
				<h3 style="color:#C59A46;">
					{{ userInfo.mobile }}
				</h3>
				<h5 style="color:#CA9A46;">
					{{ userInfo.mobile }}
				</h5>
			</div>
		</div>
		<div class="row row-cols-4 bg-white p-3 mb-3 mx-2">
			<div class="col text-center">
				<h4 class="text-danger">
					{{ userInfo.balance }}
				</h4>
				<p>
					账户余额
				</p>
			</div>
			<div class="col text-center">
				<h4 class="text-danger">
					{{ userInfo.grade_id }}
				</h4>
				<p>
					积分
				</p>
			</div>
			<div class="col text-center">
				<h4 class="text-danger">
					{{ userInfo.grade_id }}
				</h4>
				<p>
					优惠券
				</p>
			</div>
			<div class="col text-center">
				<h4>
					<van-icon name="balance-pay" size="40" />
				</h4>
				<p>
					我的钱包
				</p>
			</div>
		</div>
		<div class="row row-cols-4 bg-white p-3 mb-3 mx-2">
			<div class="col text-center">
				<h4>
					<van-icon name="description" size="40" />
				</h4>
				<p>
					全部订单
				</p>
			</div>
			<div class="col text-center">
				<h4>
					<van-icon name="pending-payment" size="40" />
				</h4>
				<p>
					待支付
				</p>
			</div>
			<div class="col text-center">
				<h4>
					<van-icon name="logistics" size="40" />
				</h4>
				<p>
					待发货
				</p>
			</div>
			<div class="col text-center">
				<h4>
					<van-icon name="send-gift-o" size="40" />
				</h4>
				<p>
					待收货
				</p>
			</div>
		</div>

		<div class=" bg-white p-3 mb-3 mx-2">
			<p>我的服务</p>
			<div class="row row-cols-4">
				<div class="col text-center">
					<h4>
						<van-icon name="guide-o" size="40" color="#FF3800" />
					</h4>
					<p>
						收货地址
					</p>
				</div>
				<div class="col text-center">
					<h4>
						<van-icon name="gift-o" size="40" color="#FF3800" />
					</h4>
					<p>
						礼物中心
					</p>
				</div>
				<div class="col text-center">
					<h4>
						<van-icon name="flower-o" size="40" color="#FF3800" />
					</h4>
					<p>
						优惠券
					</p>
				</div>
				<div class="col text-center">
					<h4>
						<van-icon name="question-o" size="40" color="#FF3800" />
					</h4>
					<p>
						我的帮助
					</p>
				</div>
				<div class="col text-center">
					<h4>
						<van-icon name="gold-coin-o" size="40" color="#FF3800" />
					</h4>
					<p>
						我的积分
					</p>
				</div>
				<div class="col text-center">
					<h4>
						<van-icon name="phone-circle-o" size="40" color="#FF3800" />
					</h4>
					<p>
						退换/售后
					</p>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import { getUserInfo } from '@/api/mine';
	export default{
		name:'AppMine',
		async created() {
			const {data:{userInfo}} = await getUserInfo()
			this.userInfo = userInfo
			console.log(userInfo);
		},
		data(){
			return{
				userInfo:{}
			}
		}
	}
</script>

<style scoped lang="less">
@import url('@/style/bootstrap.css');
.user_header{
	height: 120px;
	background-image: url('@/assets/user-header2.png');
}
</style>